<template>
	<view class="content">
		<u-navbar bgColor="rgba(242, 245, 242, 1)" :placeholder="true" :fixed="true" @leftClick="$back" title="我的权益" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view>
			<view class="top">
				<image :src="userInfo.pic | formatImgUrl" class="head" mode=""></image>
				<view class="tocen">
					<input type="text" disabled class="nick" v-model="userInfo.username">
					<view class="jibox">
					<image
						:src="$options.filters.formatImgUrl(userInfo.writer_level.is_active?userInfo.writer_level.level.image:userInfo.writer_level.level.hide_img)"
						@click="$go('/pages/user/grade?uid='+userInfo.membe_id)" class="jipic" mode=""
						v-if="userInfo&&userInfo.is_writer">
					</image>

					<image v-if="userInfo&&userInfo.user_level.is_active"
							
							:src="!userInfo.user_level.level?'':($options.filters.formatImgUrl(userInfo.user_level.active_day>0?userInfo.user_level.level.image:userInfo.user_level.level.hide_img))"
							class="biepic" mode="" >
							
						</image>
					</view>
				</view>
			</view>
			<view class="jinbg"> 
				<image :src="'/images/tbga.png' | formatImgUrl" class="bg" mode=""></image>
				<view class="nei">
					<view class="daotxt" v-if="userInfo.user_level.is_active && userInfo.user_level.level && userInfo.user_level.active_day">
						还有{{userInfo.user_level.active_day}}天未消费将暂停您的权益
					</view>
					<view class="daotxt" v-else>
						您的等级图标已灭灯，重新消费任意金额即可恢复亮灯
					</view>
					<view class="jitxt" v-if="userInfo.user_level.level">
						约文{{userInfo.user_level.is_active?userInfo.user_level.level.title:0}}级
					</view>
					<view class="jitxt" v-else>
						无等级
					</view>
					<view class="jindu">
						<u-line-progress activeColor="#3d3d3d" inactiveColor="rgba(141, 143, 158,1)" height="3"
							:percentage="(userInfo.user_exp / nextExp(userInfo.user_exp)) * 100"  :showText="false"></u-line-progress>
					</view>
					
					<view class="sjtxt">
						{{userInfo.user_exp}}/
						<text>{{nextExp(userInfo.user_exp)}} 升级还需要获得 {{nextExp(userInfo.user_exp) - userInfo.user_exp}} 经验值</text>
					</view>
					<view class="seetxt" @tap="scroll">
						查看其它徽章
					</view>
					<view class="liao">
						了解升级规则
					</view>
				</view>
			</view>
			<view class="suobox">
				<view class="line"></view>
				<view class="suoyou">
					<view class="title" v-if="userInfo.user_level.level">
						已解锁<text>{{userInfo.user_level.is_active?numEquity(userInfo.user_level.level.title):0}}项</text>权益
					</view>
					<view class="title" v-else>
						已解锁<text>0项</text>权益
					</view>
					<view class="suotxt">
						等级越高，特权越多
					</view>
				</view>
			</view>
			
			<view class="tubox">
				<view class="tuli" v-for="(item,index) in vipList">
					<view class="picbox">
						<image :src="'/images/qya.png' | formatImgUrl" class="pic" mode="" v-if="index == 0 && equityNum>=index"></image>
						<image :src="'/images/qyaa.png' | formatImgUrl" class="pic" mode="" v-if="index == 0 && equityNum < index"></image>
						
						<image :src="'/images/qyb.png' | formatImgUrl" class="pic" mode="" v-if="index == 1 && equityNum>=index"></image>
						<image :src="'/images/qyba.png' | formatImgUrl" class="pic" mode="" v-if="index == 1 && equityNum<index"></image>
						
						<image :src="'/images/qyc.png' | formatImgUrl" class="pic" mode="" v-if="index == 2 && equityNum>=index"></image>
						<image :src="'/images/qyca.png' | formatImgUrl" class="pic" mode="" v-if="index == 2 && equityNum<index"></image>
						
						<image :src="'/images/qyd.png' | formatImgUrl" class="pic" mode="" v-if="index == 3 && equityNum>=index"></image>
						<image :src="'/images/qyda.png' | formatImgUrl" class="pic" mode="" v-if="index == 3 && equityNum<index"></image>
						
						<image :src="'/images/qye.png' | formatImgUrl" class="pic" mode="" v-if="index == 4 && equityNum>=index"></image>
						<image :src="'/images/qyea.png' | formatImgUrl" class="pic" mode="" v-if="index == 4 && equityNum<index"></image>
						
						<image :src="'/images/qyf.png' | formatImgUrl" class="pic" mode="" v-if="index == 5 && equityNum>=index"></image>
						<image :src="'/images/qyfa.png' | formatImgUrl" class="pic" mode="" v-if="index == 5 && equityNum<index"></image>
						
						<image :src="'/images/qyg.png' | formatImgUrl" class="pic" mode="" v-if="index == 6 && equityNum>=index"></image>
						<image :src="'/images/qyga.png' | formatImgUrl" class="pic" mode="" v-if="index == 6 && equityNum<index"></image>
						
						<image :src="'/images/qyh.png' | formatImgUrl" class="pic" mode="" v-if="index == 7 && equityNum>=index"></image>
						<image :src="'/images/qyha.png' | formatImgUrl" class="pic" mode="" v-if="index == 7 && equityNum<index"></image>
						
						<image :src="'/images/qyi.png' | formatImgUrl" class="pic" mode="" v-if="index == 8 && equityNum>=index"></image>
						<image :src="'/images/qyia.png' | formatImgUrl" class="pic" mode="" v-if="index == 8 && equityNum<index"></image>
						
						<image :src="'/images/qyj.png' | formatImgUrl" class="pic" mode="" v-if="index == 9 && equityNum>=index"></image>
						<image :src="'/images/qyja.png' | formatImgUrl" class="pic" mode="" v-if="index == 9 && equityNum<index"></image>
						
						<image :src="'/images/suo.png' | formatImgUrl" class="spic" mode="" v-if="equityNum<index"></image>
					</view>
					<view class="tutxt">
						{{item.privilege}}
					</view>
				</view>
			
			</view>
			
			<view class="vibox">
				<view class="vline"></view>
				<view class="vtitle">
					vip等级
					<text>简介</text>
				</view>
			</view>
			<view class="vitxt">
				约文vip等级是您在平台尊贵身份的象征，采用经验值升级制度，1经验值=1rmb 。不同的等级可享有不同的特权，等级越高，特权越多。
			</view>
			
			<view class="vibox">
				<view class="vline"></view>
				<view class="vtitle">
					vip等级
					<text>经验的获取方式</text>
				</view>
			</view>
			<view class="vitxt">
				用户仅可通过消耗的方式获取经验值。
			</view>
			
			<view class="vibox">
				<view class="vline"></view>
				<view class="vtitle">
					vip等级
					<text>详情</text>
				</view>
			</view>
			<view class="vitxt pb20">
				约文vip等级共包含10个等级，如下图所示：
			</view>
			
			<view class="table" id="toView1">
				<view class="taleft">
					<view class="text">
						等级图标
					</view>
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						等级范围
					</view>
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						会员权益
					</view>
				</view>
			</view>
			<view class="tabli" v-for="item in vipList">
				<view class="taleft">
					<image :src="item.image | formatImgUrl" class="pic" mode=""></image>
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						{{item.exp}}
					</view>
				</view>
				<view class="line"></view>
				<view class="taleft">
					<view class="text">
						{{item.privilege}}
					</view>
				</view>
			</view>
			
			<view class="shititle">
				约文vip等级失效问题
			</view>
			<view class="shitxt">
				如果用户14天没有进行订单消费，约文VIP等级则会显示为灰色，但等级权益不会消失。用户只要重新完成任意金额的订单，约文VIP等级即可恢复亮灯状态。
			</view>
		</view>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				vipList: [],
				equityNum:-1,
				toView: ''
			}
		},
		onLoad() {
			
			let auth = db.get('auth');
			console.log(auth,777777777)
			//用户存在，不跳转，不存在直接跳转
			if (!auth) {
				// toLogin()
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return;
			}

		},
		onShow() {
			this.getUserInfo()
			this.getVipList()
		},
		methods: {
			scroll(){
				// this.$nextTick(()=>{
				// 	this.toView = 'toView1'
				// })
				
				uni.pageScrollTo({
					scrollTop: 1000
				})
			},
			scrolltoupper(){
				this.toView = ''
			},
			numEquity(title){
				var size = ['一','二','三','四','五','六','七','八','九','十']
				for (var i = 0; i < this.vipList.length; i++) {
					if (this.vipList[i].title === title) {
						this.equityNum = i
						return size[i]
						break;
					}
				}
			},
			nextExp(exp) {
				console.log(exp,99999999999);
				
				
				for (var i = 0; i < this.vipList.length; i++) {
					if (this.vipList[i].exp > exp) {
						return this.vipList[i].exp
						break;
					}
				}
			},
			getVipList() {
				this.$api.default.request('user/vipList').then((res) => {
					if (res.code) {
						this.vipList = res.data
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo').then((res) => {
					if (res.code) {
						this.userInfo = res.user
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding: 20rpx 30rpx;

		.top {
			display: flex;
			align-items: center;
			padding-bottom: 8rpx;

			.head {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.tocen {
				padding: 0 16rpx;

				.nick {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-bottom: 4rpx;
				}

				.jibox {
					display: flex;
					align-items: center;

					.jipic {
						width: 100rpx;
						height: 43rpx;
						margin-right: 8rpx;
					}

					.biepic {
						width:100rpx;
						height: 43rpx;
					}
				}
			}
		}

		.jinbg {
			border-radius: 4px;
			position: relative;
			width: 100%;
			height: 314rpx;
			margin-bottom: 40rpx;

			.bg {
				width: 100%;
				height: 314rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.nei {
				padding: 40rpx 40rpx 0;
				position: relative;
				z-index: 2;

				.daotxt {
					font-size: 20rpx;
					color: rgba(61, 61, 61, 0.5);
					padding-bottom: 10rpx;
					line-height: 28rpx;
				}

				.jitxt {
					font-size: 28rpx;
					color: #3D3D33;
					font-weight: bold;
					line-height: 40rpx;
					padding-bottom: 20rpx;
				}

				.jindu {
					width: 320rpx;
				}

				.sjtxt {
					font-size: 28rpx;
					color: #3D3D33;
					font-weight: bold;
					padding: 6rpx 0 54rpx;

					text {
						font-size: 20rpx;
						color: #3D3D33;
						font-weight: normal;
					}
				}

				.seetxt {
					font-size: 20rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
					line-height: 28rpx;
					padding-bottom: 2rpx;
				}

				.liao {
					font-size: 16rpx;
					font-weight: 300;
					letter-spacing: 0em;
					color: rgba(61, 61, 61, 0.5);
				}
			}
		}

		.suobox {
			display: flex;
			align-items: flex-start;
			padding-bottom: 40rpx;

			.line {
				width: 4rpx;
				height: 28rpx;
				border-radius: 42px;
				opacity: 1;
				background: #45C4B0;
				margin-top: 6rpx;
			}

			.suoyou {
				padding-left: 12rpx;

				.title {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D33;

					text {
						color: #45C4B0;
						font-size: 28rpx;
						font-weight: bold;
					}
				}

				.suotxt {
					font-size: 20rpx;
					font-weight: normal;
					letter-spacing: 0em;
					line-height: 28rpx;
					color: #999999;
				}
			}
		}

		.tubox {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 24rpx;
			.tuli {
				width: 25%;
				text-align: center;
				height: 146rpx;

				.picbox {
					width: 88rpx;
					height: 88rpx;
					position: relative;
					margin: 0 auto;

					.pic {
						width: 88rpx;
						height: 88rpx;
					}

					.spic {
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: 4rpx;
						bottom: 4rpx;
					}
				}

				.tutxt {
					margin: 0 auto;
					font-size: 16rpx;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0.08em;
					color: #3D3D3D;
					line-height: 28rpx;
					width: 88rpx;
				}
			}
		}

		.vibox {
			display: flex;
			align-items: center;
			padding-bottom: 12rpx;

			.vline {
				width: 4rpx;
				height: 28rpx;
				border-radius: 42px;
				opacity: 1;
				background: #45C4B0;
				margin-top: 6rpx;
			}

			.vtitle {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D33;
				line-height: 40rpx;
				padding-left: 12rpx;

				text {
					color: #45C4B0;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}

		.vitxt {
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0px;
			line-height: 28rpx;
			color: #999999;
			padding-bottom: 40rpx;
		}

		.pb20 {
			padding-bottom: 20rpx !important;
		}

		.table {
			display: flex;
			align-items: center;
			background-color: #ffffff;
			border: 1px solid #E5E5E5;
			height: 60rpx;

			.line {
				height: 100%;
				width: 1rpx;
				background-color: #e5e5e5;
			}

			.taleft {
				height: 60rpx;
				width: 33.2%;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.tabli {
			display: flex;
			align-items: center;
			border: 1px solid #E5E5E5;
			border-top: none;
			height: 80rpx;

			.line {
				height: 100%;
				width: 1rpx;
				background-color: #e5e5e5;
			}

			.taleft {
				height: 80rpx;
				width: 33.2%;
				display: flex;
				align-items: center;
				justify-content: center;

				.pic {
					width: 150rpx;
					height: 64rpx;
				}

				.text {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.shititle {
			padding: 36rpx 0 12rpx;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0px;
			color: #3D3D3D;
			line-height: 40rpx;
		}

		.shitxt {
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0px;
			line-height: 28rpx;
			color: #999999;
		}
	}
</style>